<template>
  <el-row>
    <el-col :span="12">
      <div class="form-main" ref="formBox">
        <el-card>
          <div slot="header" class="text-primary">
            <span class="title"> 上传头像 </span>
          </div>
          <el-form ref="form" :model="form" status-icon label-width="80px">
            <el-form-item label="用户名" prop="username">
              <el-input disabled v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item>
              <el-upload
                class="avatar-uploader"
                :action="uploadFile"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="form.avatar" :src="form.avatar" class="avatar" />
                <i
                  v-else
                  class="el-icon-plus avatar-uploader-icon"
                ></i> </el-upload
            ></el-form-item>
            <div>
              <el-button
                style="margin-left: 80px"
                @click="submitForm('form')"
                type="primary"
                >提交</el-button
              >
            </div>
          </el-form></el-card
        >
      </div>
    </el-col>
  </el-row>
</template>
<script>
import { getInfo, uploadFile } from '@/api/accountApi'
export default {
  data() {
    return {
      uploadFile: '',
      form: {
        id: 0,
        username: '',
        avatar: '',
      },
    }
  },
  created() {
    this.$nextTick(() => {
      this.getInfo()
    })
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.form.avatar = URL.createObjectURL(file.raw)
      console.log(res)
      if (res.code == 1) {
        this.getInfo()
        this.$message({
          message: '头像上传成功',
          type: 'success',
        })
      } else {
        this.$message({
          message: '头像上传失败',
          type: 'error',
        })
      }
    },
    beforeAvatarUpload(file) {
      console.log(file)
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'

      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    submitForm(formName) {
      this.$message({
        message: '头像上传成功',
        type: 'success',
      })
    },
    getInfo() {
      let account = JSON.parse(localStorage.getItem('account'))
        console.log(account)
      let account_id = account.id
   
      if (this.$route.query.id) account_id = this.$route.query.id
      getInfo({ id: account_id }).then((resp) => {
        let response = resp.data

        if (response.code == 1) {
          this.form = response.data
            this.form.avatar = process.env.VUE_APP_BASE_URL+this.form.avatar
          this.uploadFile =
            uploadFile() + '&account_id=' + response.data.account_id
        } else {
          this.$message('获取信息失败')
        }
        console.log(resp)
      })

      console.log('account_id:' + account_id)
    },
  },
}
import '@/assets/css/variables.css'
</script>
<style scoped>
.el-card {
  background: var(--bg-color);
  color: var(--text-color);
  border-color: var(--border-color);
}
::v-deep .el-card__header {
  border-bottom: 1px solid var(--border-color);
}
::v-deep .el-input__inner {
  background-color: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}
::v-deep .el-input.is-disabled .el-input__inner {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
}
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 10px;
   border: 1px solid var(--border-color);padding: 6px;
}
</style>
